<template>
  <div style="height:100%">
    <div style="height:100%">
      <div style="color:#fff;font-size:1.6rem;margin-bottom:0.2%">人员分类</div>
      <div style="width:100%;height:85%;margin:0 auto">
        <Echart :echartObj="echartObj" />
       
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/components/echarts/pie.vue'

export default {
  data() {
    return {
      echartObj: {},
      
    }
  },
  props: ['personClassification'],
  components: {
    Echart
  },
  watch: {
    personClassification: {
      handler(val, oldVal) {
        this.echartObj = {
          color: ['#FFF95C', '#0ADEFF'],

          tooltip: {
            trigger: 'item',
            formatter: '{b}: {d}%'
          },
          //   legend: {
          //     orient: 'horizontal',
          //     // left: 10,
          //     data: ['一般作业人员', '特种作业人员']
          //   },
          grid: {
            left: '5%',
            top: '3%',
            bottom: '2%',
            right: '5%',
            containLabel: true
          },
          series: [
            {
              name: '人员分类',
              type: 'pie',
              radius: ['50%', '70%'],
               selectedOffset:0,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                normal: {
                  textStyle: {
                    color: '#fff'
                  },
                  fontSize: 12,
                  formatter(v) {
                    let text = v.name
                    let count = text.indexOf('￥')

                    return text.length < count ? text : `${text.slice(0, count - 1)}\n${text.slice(count - 1)}`
                  }
                }
              },
              labelLine: {
                show: true,
                length2: 5
              },

              data: val
            }
          ]
        }
      },
      // 配置立即执行属性
      immediate: true
    }
  }
}
</script>

<style scoped>
</style>